<template>
  <view>
    <view class="bg-game">
      <view class="item-1">
        <span class="bg-game-font">中式八球</span>
        <span class="bg-game-font">{{ date }}</span>
      </view>
      <view class="item-2">

        <view class="item-2-left">

          <view style="display: flex;flex-direction: column;align-items: center;">
            <image v-if="game.eightBall.red" class="avatar" mode="aspectFit" :src="game.eightBall.red.avatar"
                   @error="imageError"></image>

            <image v-else class="avatar" mode="aspectFit" src="/static/space2.png"
                   @error="imageError"></image>

            <view v-if="game.eightBall.red" style="color: white;margin-top: 4px">
              {{ game.eightBall.red.username }}
            </view>
            <view v-else style="color: white;margin-top: 4px">暂无</view>
          </view>

          <view style="display: flex;flex-direction: column;align-items: center">
            <view class="red"></view>
            <view style="color: white;margin-top: 5px">红方</view>

            <span v-if="game.eightBall.red&&game.status!=='0'"
                  class="score">{{ game.eightBall.red.score }}</span>

          </view>

        </view>

        <view class="item-2-mid">
          <span v-if="game.status==='0'">待开始</span>
          <span v-if="game.status==='1'">进行中</span>
          <span v-if="game.status==='2'">已结束</span>

          <br>
          <span v-if="game.status==='1'">第1局</span>
        </view>

        <view class="item-2-right">

          <view style="display: flex;flex-direction: column;align-items: center">
            <view class="blue"></view>
            <view style="color: white;margin-top: 5px">蓝方</view>

            <span v-if="game.eightBall.blue&&game.status!=='0'"
                  class="score">{{ game.eightBall.blue.score }}</span>

          </view>

          <view style="display: flex;flex-direction: column;align-items: center">
            <image v-if="game.eightBall.blue" class="avatar" mode="aspectFit"
                   :src="game.eightBall.blue.avatar"
                   @error="imageError"></image>

            <image v-else class="avatar" mode="aspectFit" src="/static/space2.png"
                   @error="imageError"></image>

            <view v-if="game.eightBall.blue" style="color: white;margin-top: 4px">
              {{ game.eightBall.blue.username }}
            </view>
            <view v-else style="color: white;margin-top: 4px">暂无</view>

          </view>


        </view>

      </view>


      <view class="item-3">
        <view class="item-3-left">

          <view class="score-detail">
            <span style="font-size: 12px">普胜</span>
            <span v-if="game.eightBall.red">{{ game.eightBall.red.normalRun }}</span>
            <span v-else>0</span>
          </view>

          <view class="score-detail">
            <span style="font-size: 12px">炸清</span>
            <span v-if="game.eightBall.red">{{ game.eightBall.red.breakRun }}</span>
            <span v-else>0</span>
          </view>

          <view class="score-detail">
            <span style="font-size: 12px">接清</span>
            <span v-if="game.eightBall.red">{{ game.eightBall.red.tableRun }}</span>
            <span v-else>0</span>
          </view>

          <view class="score-detail">
            <span style="font-size: 12px">对手犯规</span>
            <span v-if="game.eightBall.red">{{ game.eightBall.red.illegalBreak }}</span>
            <span v-else>0</span>
          </view>
        </view>

        <view class="item-3-mid">
          <view style="border: #cdcccc 1px solid;height: 100rpx"></view>
        </view>
        <view class="item-3-right">
          <view class="score-detail">
            <span style="font-size: 12px">普胜</span>
            <span v-if="game.eightBall.blue">{{ game.eightBall.blue.normalRun }}</span>
            <span v-else>0</span>
          </view>

          <view class="score-detail">
            <span style="font-size: 12px">炸清</span>
            <span v-if="game.eightBall.blue">{{ game.eightBall.blue.breakRun }}</span>
            <span v-else>0</span>
          </view>

          <view class="score-detail">
            <span style="font-size: 12px">接清</span>
            <span v-if="game.eightBall.blue">{{ game.eightBall.blue.tableRun }}</span>
            <span v-else>0</span>
          </view>
          <view class="score-detail">
            <span style="font-size: 12px">对手犯规</span>
            <span v-if="game.eightBall.blue">{{ game.eightBall.blue.illegalBreak }}</span>
            <span v-else>0</span>
          </view>
        </view>
      </view>

    </view>

    <!--    <view class="game-score">-->
    <!--      <view style="width: 40%;text-align: right">-->
    <!--        <span style="font-size: 30px;font-weight: bold">{{ this.game.redScore }}</span>-->
    <!--      </view>-->
    <!--      <view style="width: 20%;text-align: center">-->
    <!--        <span style="font-size: 30px">:</span>-->
    <!--      </view>-->
    <!--      <view style="width: 40%">-->
    <!--        <span style="font-size: 30px;font-weight: bold">{{ this.game.blueScore }}</span>-->
    <!--      </view>-->
    <!--    </view>-->

    <!--    <view style="width: 100%;text-align: center">-->
    <!--      <span style="font-size: 14px;color: #d8d8d8">正在进行:第1局</span>-->
    <!--    </view>-->

    <view v-if="game.status==='1'"
          style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-around;margin-top: 30px;">
      <view class="scoreBtn" style="background: red" type="warn" size="mini" @click="redWin">
        <span style="color: white;">红胜</span>
      </view>
      <view class="scoreBtn" style="background: blue" type="primary" size="mini" @click="blueWin">
        <span style="color: white;">蓝胜</span>
      </view>
    </view>

    <!--    <view style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-top: 30px">-->
    <!--      <button style="width: 70px;font-size: 10px;background: #cd0909;color: white" @click="win(2)">炸清+1</button>-->
    <!--      <button style="width: 70px;font-size: 10px;background: #bd6913;color: white" @click="win(3)">接清+1</button>-->
    <!--      <button style="width: 70px;font-size: 10px;background: #9b9b9c;color: white" @click="win(-1)">-1</button>-->
    <!--    </view>-->


    <!--    <view v-if="game.status==='0'"-->
    <!--          style="margin-top: 50px;display: flex;flex-direction: row;justify-content: center;padding: 10px">-->
    <!--      <button type="primary" style="width: 100%" @click="inviteFriend()">邀请好友</button>-->
    <!--    </view>-->

    <view v-if="game.status==='1'"
          style="margin-top: 50px;display: flex;flex-direction: row;justify-content: center;padding: 10px">
      <button type="warn" style="width: 100%" @click="gameOverSubmit">结束对局</button>
    </view>

    <view v-if="joinGameView===true&&this.game.status==='0'">
      style="margin-top: 50px;display: flex;flex-direction: row;justify-content: center;padding: 10px">
      <button type="primary" style="width: 100%" @click="joinGame">加入对局</button>
    </view>

    <view
        style="margin-top: 50px;display: flex;flex-direction: row;justify-content: center;padding: 10px">
      <button style="width: 100%" @click="gameInfo(game.gameId)">刷新</button>
    </view>

    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view class="popup-content">

        <span style="color: #d8d8d8">点击选择</span>

        <view style="display: flex;flex-direction: row;width: 100%">

          <view class="user" @click="selectUser('1')">
            <image style="width: 30px;height: 30px;border-radius: 50%"
                   mode="aspectFit" src="/static/avatar.png" @error="imageError"></image>
            <span style="font-size: 12px">Galaxy</span>
          </view>

          <view style="width: 20rpx"></view>

          <view class="user" @click="selectUser('2')">
            <image style="width: 30px;height: 30px;border-radius: 50%"
                   mode="aspectFit" src="/static/avatar.png" @error="imageError"></image>
            <span style="font-size: 12px">Galaxy</span>
          </view>

        </view>

      </view>
    </uni-popup>


    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <picker-view :value="scoreMethod" class="picker-view" :immediateChange="true" @change="bindChange">
          <picker-view-column>
            <view class="picker-item" key="0">普胜</view>
            <view class="picker-item" key="1">炸请</view>
            <view class="picker-item" key="2">接清</view>
            <view class="picker-item" key="3">对手犯规</view>
          </picker-view-column>
        </picker-view>
      </view>

      <view class="popup-bottom">
        <view class="cancel-btn" @click="cancel">
          <text style="color: #05c160;">取消</text>
        </view>
        <view class="save-btn" @click="submitScore">
          <text style="color: white;">确定</text>
        </view>
      </view>

    </uni-popup>

    <uni-popup ref="gameOverSubmit" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="base" @confirm="gameOver">
        <span>确认结束对局吗？</span>
      </uni-popup-dialog>
    </uni-popup>

  </view>
</template>

<script>

import gameService from "../../api/game";

export default {
  components: {},
  data() {
    return {
      date: null,
      memberInfo: this.$store.state,
      scoreMethod: [],
      scoreData: {
        scoreMethod: 0
      },
      joinGameView: false,
      preView: false,
      selectData: {
        userId: '',
        score: null,
        type: null
      },
      game: {
        gameType: "0",
        status: "0",
        createBy: null,
        eightBall: {}
      },
      tableData: []
    }
  },
  onLoad: function (option) {
    this.curDate()
    this.game.gameId = option.gameId
    this.preView = option.preView
    setInterval(this.curDate, 1000);
    setInterval(this.refresh, 10000);
    this.init()
  },
  methods: {
    refresh() {
      if (this.game.gameId) {
        this.gameInfo(this.game.gameId);
      }
    },
    bindChange(e) {
      const val = e.detail.value
      this.scoreData.scoreMethod = val[0]
    },
    submitScore() {
      this.scoreData.gameId = this.game.gameId
      gameService.score(this.scoreData).then(res => {
        if (res.data.code === 200) {
          if (this.scoreData.tag === "0") {
            if (this.scoreData.scoreMethod === 0) {
              this.game.eightBall.red.score = this.game.eightBall.red.score + 1
              this.game.eightBall.red.normalRun = this.game.eightBall.red.normalRun + 1
            } else if (this.scoreData.scoreMethod === 1) {
              this.game.eightBall.red.score = this.game.eightBall.red.score + 1
              this.game.eightBall.red.breakRun = this.game.eightBall.red.breakRun + 1
            } else if (this.scoreData.scoreMethod === 2) {
              this.game.eightBall.red.score = this.game.eightBall.red.score + 1
              this.game.eightBall.red.tableRun = this.game.eightBall.red.tableRun + 1
            } else if (this.scoreData.scoreMethod === 3) {
              this.game.eightBall.red.score = this.game.eightBall.red.score + 1
              this.game.eightBall.red.illegalBreak = this.game.eightBall.red.illegalBreak + 1
            }
          } else if (this.scoreData.tag === "1") {
            if (this.scoreData.scoreMethod === 0) {
              this.game.eightBall.blue.score = this.game.eightBall.blue.score + 1
              this.game.eightBall.blue.normalRun = this.game.eightBall.blue.normalRun + 1
            } else if (this.scoreData.scoreMethod === 1) {
              this.game.eightBall.blue.score = this.game.eightBall.blue.score + 1
              this.game.eightBall.blue.breakRun = this.game.eightBall.blue.breakRun + 1
            } else if (this.scoreData.scoreMethod === 2) {
              this.game.eightBall.blue.score = this.game.eightBall.blue.score + 1
              this.game.eightBall.blue.tableRun = this.game.eightBall.blue.tableRun + 1
            } else if (this.scoreData.scoreMethod === 3) {
              this.game.eightBall.blue.score = this.game.eightBall.blue.score + 1
              this.game.eightBall.blue.illegalBreak = this.game.eightBall.blue.illegalBreak + 1
            }
          }
        }
      })
      this.$refs.popup.close()
    },
    redWin() {
      this.scoreData.tag = "0"
      this.$refs.popup.open('bottom')
    },
    blueWin() {
      this.scoreData.tag = "1"
      this.$refs.popup.open('bottom')
    },
    cancel() {
      this.$refs.popup.close()
    },
    gameOverSubmit() {
      this.$refs.gameOverSubmit.open()
    },
    joinGame() {
      gameService.join(this.memberInfo.memberId, this.game.gameId).then(res => {
        if (res.data.code === 200) {
          this.gameInfo(this.game.gameId)
        }
      })
    },
    gameOver() {
      gameService.over(this.game.gameId).then(res => {
        if (res.data.code === 200) {
          uni.navigateTo({
            url: '/pages/index/index'
          });
        }
      })
      this.$refs.gameOverSubmit.close()
    },
    inviteFriend() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "快来和我决一死战!!!",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    init() {
      if (this.preView) {
        this.gameInfo(this.game.gameId)
        console.log(11111111111111)
      } else {
        if (this.memberInfo.memberId !== '') {
          gameService.queryCurGame(this.memberInfo.memberId, '0').then(res => {
            if (res.data.code === 200) {
              if (res.data.data && res.data.data.gameId !== undefined) {
                //加载正在进行的比赛
                this.gameInfo(res.data.data.gameId)
              } else {
                //创建新的比赛
                let data = {
                  createBy: this.memberInfo.memberId,
                  gameType: "0"
                }
                gameService.createGame(data).then(res => {
                  if (res.data.code === 200) {
                    this.game = res.data.data
                  }
                })
              }
            }
          })
        }
      }
    },
    gameInfo(gameId) {
      gameService.queryGame(gameId).then(res => {
        if (res.data.code === 200) {
          console.log("获取比赛信息成功")
          this.game = res.data.data
          if (this.game.createBy !== null && this.game.status === '0') {
            if (this.game.createBy !== this.memberInfo.memberId.toString()) {
              this.joinGameView = true
            }
          }
          console.log(this.game)
        }
      })
    },

    curDate() {
      let currentDate = new Date()
      var year = currentDate.getFullYear();
      var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
      var day = currentDate.getDate().toString().padStart(2, '0');
      var hours = this.padZero(currentDate.getHours());
      var minutes = this.padZero(currentDate.getMinutes());
      var seconds = this.padZero(currentDate.getSeconds());
      this.date = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    padZero(num) {
      return num < 10 ? '0' + num : num;
    },
    selectUser(id) {
      this.selectData.userId = id
      this.$refs.popup.close()
    },
    change() {

    }
  }
}
</script>

<style lang="scss">
.bg-game {
  width: 100%;
  height: 450rpx;
  background: #536abd;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);

  .item-1 {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .item-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;

    .item-2-left {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 150rpx;
      width: 35%;

      .red {
        background: red;
        width: 65rpx;
        height: 40rpx;
      }
    }

    .item-2-mid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 30%;
      color: white;
      font-size: 30rpx;
      font-weight: bold;

    }

    .item-2-right {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 150rpx;
      width: 35%;

      .blue {
        background: blue;
        width: 65rpx;
        height: 40rpx;
      }

    }

  }

  .item-3 {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    justify-content: space-between;
    width: 100%;

    .item-3-left {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-content: flex-end;
      align-items: flex-end;
      height: 100rpx;
      width: 45%;
      margin-top: 5px;
    }

    .item-3-mid {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 10%;

    }

    .item-3-right {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-content: flex-end;
      align-items: flex-end;
      height: 100rpx;
      width: 45%;
      margin-top: 5px;
    }

  }

  .score-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
  }


}

.game-score {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150rpx;
}


.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  height: 80px;
  background-color: #fff;

  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    height: 120rpx;
  }
}

.bg-game-font {
  color: white;
  font-size: 20rpx;
  font-weight: bold;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.score {
  color: white;
  font-size: 60rpx;
  margin-top: 10px;
  font-weight: bold
}

.scoreBtn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.picker-view {
  width: 100%;
  height: 100rpx;
  margin-top: 20rpx;
}

.picker-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: 100rpx;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.popup-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 45px;
  border-radius: 5px;
  background: #f2f2f2;
  margin-right: 10px;
}

.save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 95px;
  height: 45px;
  background: #05c160;
  margin-left: 10px;
}

</style>
